<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../sass/01.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../js/01.js" type="text/javascript"></script>
     <link rel="stylesheet" href="../sass/ggys.css">
     <link rel="stylesheet" href="../sass/xqy.css">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->

  </head>
  <body>
    <div class="topBar">
      <div class="wrap">
        <ul class="topBarR">
          <li>
            <a href="#" class="login">请登录</a>
            <a href="#">免费注册</a>
          </li>
          <li class="pipe">|</li>
          <li class="menu_hd">
            <a href="#">我的有路</a>
            <ul class="menu_list">
              <li><a href="#">自营订单</a></li>
              <li><a href="#">店铺订单</a></li>
              <li><a href="#">团购订单</a></li>
              <li><a href="#">我的余额</a></li>
              <li><a href="#">我的校园</a></li>
            </ul>
          </li>
          <li class="pipe">|</li>
          <li><a href="#">我要开店</a></li>
          <li class="pipe">|</li>
          <li><a href="#">有路公众号</a></li>
          <li class="pipe">|</li>
          <li><a href="#">团购批发</a></li>
          <li class="pipe">|</li>
          <li><a href="#">客服服务</a></li>
        </ul>
        <div class="topBarL">
          <img src="	https://www.youlu.net/images/home/welcome.jpg" alt="" />
          <span>您好，欢迎光临有路网</span>
        </div>
      </div>
    </div>
    <div class="search-wrap">
      <div class="search-nav">
        <div class="logo">
          <a href="#">
            <img src="../image/logo.jpg" alt="" />
          </a>
        </div>
        <div class="search">
          <form action="search/check">
            <input type="text" class="sousu" />
            <input type="submit" value="搜索" class="anniu" />
            <label>书名、作者、出版社、ISBN、文具</label>
          </form>
          <div class="search_tip">
            <a href="#">同店找书</a>
            <span></span>
            <a href="#">高级搜索</a>
          </div>
          <div class="search_hot">
            <strong>热门搜索:</strong>
            <a href="#">毛泽东思想和中国特色</a>
            <a href="#">高等数学(第七版)</a>
            <a href="#">计算机网络</a>
            <a href="#">管理学</a>
          </div>
        </div>

        <div class="bookCart">
          <a href="#">网站购物车<span>0</span>本</a>
          <a href="#">店铺购物车<span>0</span>本</a>
        </div>
      </div>
    </div>
    <div class="navWarp">
      <div class="nav">
        <div class="navListTop">
          <a href="#" class="top">全部图书分类</a>
          <ul>
            <li>
              <h2>经济管理</h2>
              <div>
                <a href="#">市场营销</a>
                <a href="#">经济学理论</a>
                <a href="#">国际贸易</a>
                <a href="#">物流管理</a>
                <a href="#">管理学原理</a>
                <a href="#">财务原理</a>
              </div>
            </li>
            <li>
              <h2>文学艺术</h2>
              <div>
                <a href="#">设计</a>
                <a href="#">音乐</a>
                <a href="#">青春文学</a>
                <a href="#">绘画</a>
                <a href="#">外国文学</a>
                <a href="#">人物传记</a>
              </div>
            </li>
            <li>
              <h2>人文社科</h2>
              <div>
                <a href="#">数学</a>
                <a href="#">英语教材</a>
                <a href="#">化学</a>
                <a href="#">日语</a>
                <a href="#">生物科学</a>
                <a href="#">专业日语</a>
              </div>
            </li>
            <li>
              <h2>科学艺术</h2>
              <div>
                <a href="#">语言与编程</a>
                <a href="#">电子通信</a>
                <a href="#">电工电子</a>
                <a href="#">数据库</a>
                <a href="#">建筑工程</a>
                <a href="#">土木工程</a>
              </div>
            </li>
            <li>
              <h2>生活休闲</h2>
              <div>
                <a href="#">家庭保健</a>
                <a href="#">美食烹饪</a>
                <a href="#">导游必备</a>
                <a href="#">地理学理论</a>
                <a href="#">动漫卡通</a>
                <a href="#">球类</a>
              </div>
            </li>
            <li>
              <h2>教育考试</h2>
              <div>
                <a href="#">教学理论</a>
                <a href="#">自考</a>
                <a href="#">研究考试</a>
                <a href="#">考研英语</a>
                <a href="#">公务员考试</a>
                <a href="#">初高中用书</a>
              </div>
            </li>
          </ul>
        </div>

        <ul class="navList">
          <li>
            <a href="#">首页</a>
          </li>
          <li><a href="#">旧书回收</a></li>
          <li><a href="#">分类</a></li>
          <li><a href="#">入驻书店</a></li>
          <li><a href="#">文具</a></li>
          <li><a href="#">电子书</a></li>
        </ul>
      </div>
    </div>
     <div class="conterWarp">
         <!-- 图书所属分类 -->
         <div class="conter-nav">
             <span>您现在的位置:</span>
             <a href="#">全部分类&gt;</a>
             <a href="#">艺术&gt;</a>
             <a href="#">动画</a>
         </div>
         <!-- 图书购买区 -->
         <div class="conter-shopping">
             <!-- 图片 -->
            <div class="shopping-picture">
                <div class="picture-01"> 
                    <a href="#">
                        <img src="" alt="">
                        
                    </a>
                </div>
                <div  class="picture-02">
                   <div>
                    <a href="#">
                        <img src="../image/xxx.gif" alt="">
                        收藏有路
                    </a>
                   </div>
                      <div>
                        <a href="#">
                            <img src="../image/xxing.gif" alt="">
                            推荐给好友
                        </a>
                      </div>
                </div>
                <div  class="picture-03">
                    QQ咨询：
                   <a href="#">
                       <img src="../image/qq.gif" alt="">
                   </a>
                </div>
            </div>
         </div>
         <!-- 摘要 -->
         <div class="keyPoint">
           <!-- 标题 -->
           <div>
               <h2 class="name" ></h2>
           </div>
            <!-- 书本信息 -->
           <div  class="bookContent"> 
               <div class="bookContent-title">

                <div class="bookContent01">
                    <ul>
                        <li>作者：<a href="#">文杰书院</a></li>
                        <li>出版社：<a href="#">清华大学出版社</a></li>
                        <li>ISBN：<span>9787302272649</span></li>
                    </ul>
                    <ul>
                        <li>出版日期：<span>2012年01月01日</span></li>
                        <li>页数：<span>292</span></li>
                        <li class="price">定价：<span>¥<em></em></span></li>
                    </ul>
                </div>
               </div>
               <div class="bookContent02">
                   <!-- 销售详情 -->
                   <div>
                    您已成功购买 
                    <span class="purchasedCount">1</span>
                    本，请您尽快
                    <a href="#" target="_blank">【结算】</a>
                    ，超过 2 小时系统将自动清空。
                   </div>
                  
                       <!-- 价格去 -->
                   <div class="spriceConter">
                    <div class="spricewar01">
                      <div class="sss bbb">有路价 <div class="aaa">￥</div>[2.3折]</div>
                      <div class="bbb">vip价<div class="aaa">￥9.50</div >[3.3折]</div>
                      <div class="bbb">折扣价<div class="aaa">￥1.00</div>[2.8折]</div>
                      <div class="bbb">抵扣价<div class="aaa">￥1.20</div>[2.5折]</div>
                    </div>
                    <!-- 扫码 -->
                    <div>
                      <input type="number" id="gwc" value="1" name="" style="border:1px solid black">
                      <button onclick=addCart() style="background-color: rgb(201, 12, 12); width:100px;height: 22px;color: white; border-radius: 5px;">加入购物车</button>
                      
                    </div>
                      <div class="tck">
                        <p>购买成功共一本</p>
                        <p>一本，10元</p>
                        <input type="button" value="去购物车结算" onclick=wc() >
                      </div>
                   </div>
                   
               </div>
           </div>
         </div>
     </div>
    <div class="screen">
        <div class="screenWrap">
         <div class="screenTop">
          <div>
            <h3>消费者保障</h3>
            
            <ul>
              <li><a href="#">7天无理由退货</a></li>
              <li><a href="#">24小时之内发货</a></li>
              <li><a href="#">服务中心</a></li>
              
            </ul>
          </div>
          <div>
            <h3>新手上路</h3>
            <ul>
              
              <li><a href="#">配送说明</a></li>
              <li><a href="#">如何买书</a></li>
              <li><a href="#">如何支付</a></li>
              <li><a href="#">如何退款</a></li>
            </ul>
          </div>
          <div>
            <h3>付款方式</h3>
            <ul>
              <li><a href="#">网上支付</a></li>
              <li><a href="#"></a>余额支付</li>
              <li><a href="#"></a>积分支付</li>
              <li><a href="#"></a>礼券支付</li>
            </ul>
          </div>
          <div>
            <h3>个人账户</h3>
            <ul>
              <li><a href="#">如何注册</a></li>
              <li><a href="#">礼券与VIP</a></li>
              <li><a href="#">会员升级为VIP</a></li>
              <li><a href="#"></a>第三方登录</li>
              <li><a href="#"></a>更多介绍</li>
            </ul>
          </div>
         </div>
         <div class="lj">
           <p>友情链接:</p>
           <p>
             <a href="#">二手货</a>
             <a href="#">腾讯企业</a>
             <a href="#">QQ企业培训</a>
             <a href="#">二手网</a>
             <a href="#">中国考研网</a>
             <a href="#">工程资料</a>
             <a href="#">中华讲师网</a>
             <a href="#">考试用书</a>
             <a href="#">违章查询</a>
             <a href="#">快递查询</a>
             <a href="#">人力资源</a>
             <a href="#">圣才学习网</a>
             <a href="#">简历模版</a>
             <a href="#">二手手机回收</a>
             <a href="#">防伪码</a>
             <a href="#">查询产品</a>
             <a href="#">防伪溯源</a>
             <a href="#">微信小程序</a>
             <a href="#">商店内推</a>
             <a href="#">小王子</a>
             <a href="#">期刊发表</a>
             <a href="#">互联网联合</a>
             <a href="#">辟谣平台</a>
             <a href="#">吕布云轮</a>
           </p>
         </div>
         <div class="footer">
         <div class="footer-wrap">
          <div class="footer-xx">
            名称：南昌有路文化发展有限公司
            <br>
            地址：南昌昌北经济技术开发区玉屏西大街299号清华科技园B205室
            <br>
            咨询电话：0791-83849620 传真：0791-83849520-810 邮箱：do(a)youlu.net 
            <br>
            © 有路网 
            <a href="#">赣ICP备06008180号-2</a>
            <a href="#" >赣工商网备第200911040306561424号</a>
           </div>
          <div class="footerzzs">  
            <div class="one">
            <a href="#"><img src="../image/xkz.jpg" alt=""></a>
            <a href="#"><img src="../image/yyzz_s.jpg" alt=""></a>
          </div>
          <div class="two">
            <a href="#"><img src="../image/wcn.jpg" alt=""></a>
            <a href="#" ><img src="../image/smrz.png" alt="" style="height: 35px;"></a>
          </div>
        </div>
         </div>
           <div class="tooter-right">
             
           </div>
         </div>
         <div class="police">
           <div class="police-wrap">
             <div class="police-b1"><a href="#"><img src="../image/bjgt.gif" alt=""></a></div>
             <div class="police-b2">
               <p>
                 <a href="#">关于有路</a>
                 ┆
                 <a href="#">乘车热线</a>
                 ┆
                 <a href="#">有路联盟</a>
                 ┆
                 <a href="#">网站地图</a>
                 ┆
                 <a href="#">帮助中心</a>
                 ┆
                 <a href="#">客服中心</a>
                 ┆
                 <a href="#">友情链接</a>
                 ┆
                 <a href="#">触屏版</a>
                </p>
                <div>
                  咨询QQ:
                  <a href="#"><img src="../image/qq.gif" alt=""></a>
                </div>
                <b>
                  有路网-书山有路网上二手书店是国内专业的二手书旧书在线销售网站，提供优质低廉的正版旧书、旧教材。
                  <br>
                  提供支付宝、财付通、网上银行、银行汇款等支付方式；提供平邮、快递、EMS、自取等多种送货方式。
                  <br>
                  付款后24小时内发货，自动跟踪物流。所有图书全场一角起价，不满意无理由退货。
                </b>
             </div>
             <div class="police-b3"><a href="#"><img src="../image/wangan.gif" alt=""></a>
                    <p>360112011051301</p>
            </div>
             <div class="police-b4"><a href="#"><img src="../image/yhxx.jpg" alt=""></a></div>
           </div>
         </div>
        </div>
    </div>
<!-- 全部图书分类 -->
<script>
     let listUl=document.querySelector(".navListTop ul");
     let navTop=document.querySelector(".navListTop");
      navTop.onmouseenter=function(){
          listUl.style.display="block";
      };
      navTop.onmouseleave=function(){
          listUl.style.display="none";
      };
</script>
<script>
  //     接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
  // 接口请求方式：get
  // 接口参数：
  // id  商品的id
  // 使用方式
  // 获取id为1的商品的详情
  // http://jx.xuzhixiang.top/ap/api/detail.php?id=1
  // 服务器返回json数据

  // 获取商品id  location 链接  search  是链接里的数据
  let searchObj = new URLSearchParams(location.search);
  let id = searchObj.get("id");
  let itemAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
  // 发起请求
  $.get(
    itemAPI,
    {
      id,
    },
    function (res) {
   let pObj = res.data;
  
   $(" .picture-01 img").attr('src',pObj.pimg);
   $(" .name").html(pObj.pname);
   $(" .price").html(pObj.pprice);
   $(" .sss div").html(pObj.pprice);

  //  let str=
  //  `
  //  <li>
  //      <p>${pObj.pname}</p>
  //      <p>${pObj.pprice}</p>
  //      <img src="${pObj.pimg}" alt="">
  //      <input type="number" value="1" name="">
  //      <button onclick=addCart()>加入购物车</button>
  //  </li> 
   
  //  `;
  //  $("ul").html(str); 
    }
  );
      // 获取 用户id
//   给将商品加入到购物车  当点击加入购物车按钮时执行函数
   async function addCart(){
     $(".tck ").css("display","block");
     let uid=localStorage.getItem("id");
     pid; 
    //  获取加入购物车
     let gwc=document.querySelector("#gwc");
      //  要添加的数量
      let pnum= gwc.value;
      // 创建params 对象
      let params={uid,pid,pnum}
      let cartAPI="http://jx.xuzhixiang.top/ap/api/add-product.php";
      let res= await axios.get(cartAPI,{params});
     
      console.log(res.data);
        alert("加入购物车成功");
     
    //    调用将购物车商品添加接口

//     接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
//  接口请求方式：get
//  接口参数：
//       uid  用户id
//       pid  商品id
//       pnum  要添加的商品数量

//  使用方式

//       http://jx.xuzhixiang.top/ap/api/add-product.php?uid=1&pid=1&pnum=1
//       服务器返回json数据
   
   }
   function wc(){
       location.href="cart.html";
   }
</script>
  </body>
</html>
